<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/amazingHeader2::amazing_header('添加类别')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="categoryName" class="layui-form-label">
                    <span class="x-red">*</span>分类名

                </label>
                <div class="layui-input-inline">
                    <input type="text" id="categoryName" name="categoryName" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>您要添加分类的父分类
                </label>
                <div class="layui-input-inline" style="padding-top: 20px">
                    <span class="x-red" id="fName"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <a class="layui-btn" onclick="addCate()">
                    增加
                </a>
            </div>
        </form>
    </div>
</div>
<script>
    const href = window.location.href;
    //截取 分类id
    let id = href.split("?")[1].split("=")[1];
    $.ajax({
        type: "GET",
        url: 'cate/cateName',
        data: {
            'id': id,
        },
        beforeSend: function () {
            loading = layer.msg('处理中', {icon: 16});
        },
        success: function (result) {
            layer.close(loading);
            $('#fName').text(result.msg);
        }
    });

    function addCate() {
        const name = $('#categoryName').val();
        if (name.length > 10) {
            layer.msg("名称长度不能超过10", {time: 1500, icon: 5, shift: 6}, function () {
            });
            return false;
        }
        let data = {'pid': id, 'name': name};
        $.ajax({
            //'cate/cate?pid=' + id + '&name=' + name
            type: "PUT",
            url: 'cate/cate',
            data: JSON.stringify(data),
            contentType: "application/json",
            beforeSend: function () {
                loading = layer.msg('处理中', {icon: 16});
            },
            success: function (result) {
                layer.close(loading);
            }
        });
        layer.msg("添加成功", {time: 1500, icon: 6}, function () {
        });
        setTimeout(xadmin.close, 500);
        setTimeout(xadmin.father_reload, 500);
    }

</script>
<script>layui.use(['form', 'layer'],
    function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            categoryName: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)',
            function (data) {
                console.log(data);
                //发异步，把数据提交给php
                layer.alert("增加成功", {
                        icon: 6
                    },
                    function () {
                        //关闭当前frame
                        xadmin.close();

                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                return false;
            });

    });</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>
</html>